/*
 * @Author: Wxx
 * @Date: 2022-02-22 14:23:20
 * @LastEditors: Wxx
 * @LastEditTime: 2022-02-22 14:43:58
 * @Description:
 */
import React, { Component, useEffect, useLayoutEffect } from "react";

export default class App extends Component {
  state = {
    show: true,
  };
  render() {
    return (
      <div>
        <button onClick={() => this.setState({ show: false })}>
          隐藏子组件
        </button>
        {this.state.show && <Child />}
      </div>
    );
  }
}

/**下面useEffect和useLayoutEffect实现的功能是相同的
 * useEffect和useLayoutEffect有什么区别呢？
 * 简单来说就是调用时机不同，useLayoutDffect和原来的componentDidMount & componentDidUpdate一致，在react完成DOM更新后马上
 * 同步调用代码，会阻塞页面渲染，而useEffect是会在整个页面渲染完才会调用代码
 * 在实际使用时如果想避免页面抖动（在useEffect里修改DOM很有可能出现）的话，可以把需要操作DOM的代码放在useLayoutDffect里，在这里
 * 做点DOM操作。这些dom修改会和react作出的更改一起被一次性渲染到屏幕上，只有一次回流、重绘的代价。
 *
 */

function Child() {
  // useEffect(() => {
  //   window.onresize = () => {
  //     console.log("onresize");
  //   };
  //   var timer = setInterval(() => {
  //     console.log("setInterval");
  //   }, 1000);

  //   return () => {
  //     console.log("组件销毁");
  //     window.onresize = null;
  //     clearInterval(timer);
  //   };
  // }, []);
  useLayoutEffect(() => {
    window.onresize = () => {
      console.log("onresize");
    };
    var timer = setInterval(() => {
      console.log("setInterval");
    }, 1000);

    return () => {
      console.log("组件销毁");
      window.onresize = null;
      clearInterval(timer);
    };
  }, []);
  return <div>子组件</div>;
}
